<template>
	<view class="login">
		<view class="title">
			登录
		</view>
		<view class="input">
			<input type="text" value="" placeholder="账号" placeholder-style="color:#976bf8" v-model="username"/>
			<input type="text" value="" placeholder="密码" placeholder-style="color:#976bf8" v-model="password"/>
		</view>
		<button type="primary" class="button" @click="toLogin">登录</button>
		<view class="nickname">
			测试接口是否成功:<text class="text">{{user.nickname || "未获取到用户名"}} </text>
		</view>
		<view class="image">
			<image :src="user.head|| ''" mode="scaleToFill"></image>
		</view>
		<loading ref="show"></loading>
	</view>
</template>

<script>
	import { mapState, mapMutations} from 'vuex'
	export default{
		data(){
			return{
				username:"17853679778",
				password:"123456",
				user:{}
				
			}
		},
		onLoad() {
		},
		methods:{
			...mapMutations(['login']),
			toLogin(){
				this.$refs['show'].show = true
				const {username,password} = this
				let params = {
					phone:username,
					password:password,
				}
				this.$api.toLogin(params).then(res => {
					console.log(res)
					const {result,info, data} = res.data
					if(result === 1){
						this.$toast("测试登录成功")
						this.user = data.user
						// 保存token到本地
						this.$cache.updateCache(this.$cache.TOKEN,data.token)
						// 保存信息到vuex 并更改状态为login
						this.login(data.user)
						// 跳转返回到上一页
						uni.navigateBack();
					}else{
						this.$toast(info)
					}
                }).catch((err) => {
					this.$toast("请检查网络")
				}).finally((e) => {
					// console.log("失败成功都会返回回调")
					this.$refs['show'].show = false
				}) 
			},
			// toLogin(){
			// 	this.$refs['show'].show = true
			// 	const {username,password} = this
			// 	let params = {
			// 		username:username,
			// 		password:password,
			// 	}
			// 	uniCloud.callFunction({
			// 		name: 'user-center',
			// 		data: {
			// 			action: 'login',
			// 			params
			// 		},
			// 		success(res) {
			// 			let datas = res.result
			// 			console.log(res.result)
			// 			// uni.showModal({
			// 			// 	showCancel: false,
			// 			// 	content: JSON.stringify(res.result)
			// 			// })
			// 			// console.log(res)
			// 			// uni.setStorageSync('uni_id_token', res.result.token)
			// 			// uni.setStorageSync('uni_id_token_expired', res.result.tokenExpired)
			// 		},
			// 		fail(e) {
			// 			console.error(e)
			// 			uni.showModal({
			// 				showCancel: false,
			// 				content: '登录失败，请稍后再试'
			// 			})
			// 		}
			// 	})
				
				
			// }
		}
	}
</script>

<style>
	page{
		background: #f5f5f5;
		padding-top: 30rpx;
	}
	.login{
		padding: 0 30rpx;
	}
	.title{
		text-align: center;
		color: rgb(151, 107, 248);
		font-size: 60rpx;
		
	}
	.input{
	}
	.input input{
		height: 70rpx;
		margin: 10rpx;
		border: 1px #976bf8 solid;
		border-radius: 20rpx;
		color: #1336d4;
		text-indent: 20rpx;
	}
	.button{
		margin-top: 100rpx;
		width: 500rpx;
		height: 70rpx;
		line-height: 70rpx;
	}
	.nickname{
		text-align: center;
		margin-top: 30rpx;
	}
	.text{
		color: red;
	}
	.image{
		width: 200rpx;
		height: 200rpx;
		margin: auto;
		margin-top: 30rpx;
	}
	.image image{
		height: 100%;
		width: 100%;
		border-radius: 50%;
	}
</style>

